<template>
  <div class="company-info">
    <div class="info-container">
      <div class="info-item">
        <div class="title">工商信息</div>
        <div class="info-box">
          <div class="info-box-item">
            <div class="sub-title">企业名称</div>
            <el-tooltip
              class="item"
              effect="light"
              :content="companyInfo.name"
              placement="top-end"
            >
              <div class="sub-value">{{ companyInfo.name || '-' }}</div>
            </el-tooltip>
          </div>
          <div class="info-box-item">
            <div class="sub-title">法定代表人</div>
            <div class="sub-value">{{ companyInfo.legalPerson || '-' }}</div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">成立日期</div>
            <div class="sub-value">
              {{ companyInfo.businessStartTime || '-' }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">企业类型</div>
            <div class="sub-value">{{ companyInfo.comTypeName || '-' }}</div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">注册资本</div>
            <div class="sub-value">
              {{ formatRegCapital(companyInfo.regCapital) }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">实缴资本</div>
            <div class="sub-value">
              {{ formatRegCapital(companyInfo.realCapital) }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">登记状态</div>
            <div class="sub-value">
              {{ companyInfo.manageStateName || '-' }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">登记机关</div>
            <div class="sub-value">{{ companyInfo.regUnit || '-' }}</div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">工商注册号</div>
            <div class="sub-value">
              {{ companyInfo.businessRegNumber || '-' }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">营业期限</div>
            <div class="sub-value" v-if="companyInfo.businessStartTime">
              {{ companyInfo.businessStartTime || '~' }}至{{
                companyInfo.businessEndTime || '~'
              }}
            </div>
            <div class="sub-value" v-else>-</div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">所属地区</div>
            <div class="sub-value">
              {{ companyInfo.locationRegionName || '-' }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">纳税人识别号</div>
            <div class="sub-value">
              {{ companyInfo.taxIdentificationNumber || '-' }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">参保人数</div>
            <div class="sub-value">
              {{ companyInfo.insuranceNumber || '-' }}
            </div>
          </div>
          <div class="info-box-item">
            <div class="sub-title">所属行业</div>
            <div class="sub-value">{{ companyInfo.tradeName || '-' }}</div>
          </div>
          <div class="info-box-item span5 long-info-container">
            <div class="sub-title">经营范围</div>
            <div class="longInfo" ref="longInfo0">
              {{ companyInfo.businessCcope || '该公司经营范围正在建设中~' }}
            </div>
            <div class="expend-container" v-if="showExpend[0]">
              <div class="btn" @click="expandContent(0)">
                <span class="text">{{ expendButtonText[0] || '-' }}</span>
                <i
                  :class="
                    expendButtonText[0] == '查看全文'
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i>
              </div>
            </div>
          </div>
          <div class="info-box-item span5 long-info-container">
            <div class="sub-title">公司介绍</div>
            <div class="longInfo" ref="longInfo1">
              {{ companyInfo.introduce || '该公司介绍正在建设中~' }}
            </div>
            <div class="expend-container" v-if="showExpend[1]">
              <div class="btn" @click="expandContent(1)">
                <span class="text">{{ expendButtonText[1] || '-' }}</span>
                <i
                  :class="
                    expendButtonText[1] == '查看全文'
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i>
              </div>
            </div>
          </div>
        </div>
        <div class="title mt36">工作地址</div>
        <div class="info-box-other">
          <img :src="location" class="icon" />
          <span class="location">{{
            companyInfo.locationRegionDetail || '-'
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import location from '@/assets/images/png/location.png';
export default {
  props: {
    companyInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      location,
      showExpend: [false, false], // 是否显示展开按钮
      expendButtonText: ['查看全文', '查看全文'] // 展开按钮文字
    };
  },
  mounted() {
    // this.isOverflowing();
  },
  watch: {
    companyInfo: {
      handler(val) {
        this.isOverflowing();
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    formatRegCapital(val) {
      const isNumber = typeof val === 'number';
      if (!isNumber) return '-';
      if (val > 1000000) {
        return '-';
      } else {
        return `${val}万`;
      }
    },
    isOverflowing() {
      this.$nextTick(() => {
        for (let index = 0; index < 2; index++) {
          const element = this.$refs[`longInfo${index}`];
          // 检查元素内容是否超过82px（四行的高度是83px
          this.$set(this.showExpend, index, element.clientHeight > 82);
          this.$set(this.expendButtonText, index, '查看全文');
        }
      });
    },
    expandContent(index) {
      this.$nextTick(() => {
        const element = this.$refs[`longInfo${index}`];
        if (this.expendButtonText[index] == '收起全文') {
          this.$set(this.expendButtonText, index, '查看全文');
          // 给元素移除expand类，以收起内容
          element.classList.remove('expand');
        } else {
          this.$set(this.expendButtonText, index, '收起全文');
          // 给元素添加expand类，以展开内容
          element.classList.add('expand');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.company-info {
  padding: 0 24px 80px 24px;
  margin-top: 12px;
  border-radius: 0px 8px 8px 0px;
  background-color: #fff;
  .info-container {
    .info-item {
      .title {
        width: 88px;
        height: 28px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 20px;
        color: #000000;
        line-height: 28px;
        text-align: left;
        font-style: normal;
      }
      .info-box {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 36px 18px;
        background: #f6fbff;
        border-radius: 12px;
        padding: 24px 24px 24px 24px;
        margin-top: 14px;
        &-item {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          &:last-child {
            margin-bottom: 0;
          }
          .sub-title {
            font-size: 14px;
            color: #888888;
            margin-bottom: 10px;
          }
          .sub-value {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 15px;
            color: #222222;
          }
        }
        .gridRow1 {
          grid-template-rows: repeat(1, auto);
        }
        .span5 {
          grid-column: span 5;
        }
      }
      .info-box-other {
        margin-top: 12px;
        padding: 13px 27px;
        border-radius: 12px;
        border: 1px solid #c4d6e5;
        display: flex;
        align-items: center;
        .icon {
          width: 24px;
          height: 24px;
          font-size: 20px;
          color: #d0d4dd;
          margin-right: 14px;
        }
        .location {
          font-weight: 400;
          font-size: 15px;
          color: #222222;
        }
      }
      .mt36 {
        margin-top: 36px;
      }
    }
  }
}
.long-info-container {
  .longInfo {
    transition: all 0.3s ease;
    max-height: 102px;
    overflow: hidden;
    white-space: pre-wrap;
    line-height: 26px;
    font-size: 15px;
    color: #222222;
    &.expand {
      max-height: none;
      & + .expend-container {
        bottom: -6px;
        background-color: transparent;
        &::before {
          display: none;
        }
      }
    }
  }
  .expend-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    background-color: #f6fbff;
    padding-bottom: 10px;
    cursor: pointer;
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 7px 20px;
      background: #e3eeff;
      border-radius: 100px;
      color: #4880ff;
      .text {
        font-size: 14px;
        margin-right: 5px;
      }
    }
    &::before {
      position: absolute;
      top: -60px;
      left: 0;
      content: '';
      width: 100%;
      //从底部白色到顶部透明渐变，高度为100%
      height: 60px;
      background: linear-gradient(
        180deg,
        rgba(246, 251, 255, 0) 0%,
        #f6fbff 100%
      );
    }
  }
}
</style>
